<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>录音功能示例</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
}

.button:hover {
    background-color: #45a049;
}

.button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#recordDuration {
    display: block;
    margin-top: 10px;
}

</style>
</head>
<body>

<div class="container">
    <button id="startRecord" class="button">开始录音</button>
    <button id="stopRecord" class="button" disabled>停止录音</button>
    <button id="previewRecord" class="button" disabled>预览录音</button>
    <button id="downloadRecord" class="button" disabled>下载录音</button>
    <span id="recordDuration"></span>
</div>

<script src="../js/jquery.js"></script>
<script>
$(document).ready(function() {
    let mediaRecorder;
    let chunks = [];
    let startTime;

    $('#startRecord').click(function() {
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(function(stream) {
                mediaRecorder = new MediaRecorder(stream);

                mediaRecorder.ondataavailable = function(e) {
                    chunks.push(e.data);
                };

                mediaRecorder.onstop = function() {
                    let blob = new Blob(chunks, { 'type': 'audio/ogg; codecs=opus' });
                    chunks = [];

                    let url = URL.createObjectURL(blob);
                    $('#downloadRecord').attr('href', url);
                    $('#downloadRecord').attr('download', 'recording.ogg');
                    $('#downloadRecord').removeAttr('disabled');

                    let duration = (Date.now() - startTime) / 1000;
                    $('#recordDuration').text('录音时长：' + duration.toFixed(2) + ' 秒');
                };

                startTime = Date.now();
                mediaRecorder.start();
                $('#startRecord').attr('disabled', true);
                $('#stopRecord').removeAttr('disabled');
                $('#previewRecord').attr('disabled', true);
            })
            .catch(function(err) {
                console.error('无法访问麦克风:', err);
            });
    });

    $('#stopRecord').click(function() {
        mediaRecorder.stop();
        $('#stopRecord').attr('disabled', true);
        $('#startRecord').removeAttr('disabled');
        $('#previewRecord').removeAttr('disabled');
    });

    $('#previewRecord').click(function() {
        let blob = new Blob(chunks, { 'type': 'audio/ogg; codecs=opus' });
        let url = URL.createObjectURL(blob);
        let audio = new Audio(url);
        audio.play();
    });
});
</script>

</body>
</html>